<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title all-teacher-title">
        <h2 class="fl tac">
          <span class="c-333">我的订单</span>
        </h2>
      </header>
      <section v-if="list.lenght === 0" class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">您单前还没有订单</span>
          </section>
          <!-- /无数据提示 结束-->
        </div>
      </section>
      <el-table
        v-else
        :data="list"
        border
        fit
        highlight-current-row
        row-class-name="myClassList"
      >
        <el-table-column label="课程信息" width="300" align="center">
          <template slot-scope="scope">
            <div>
              <div>
                <img
                  :src="scope.row.courseCover"
                  :alt="scope.row.courseTitle"
                  width="150"
                />
              </div>
              <div class="title">
                <a :href="`/course/${scope.row.courseId}`">{{
                  scope.row.courseTitle
                }}</a>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="讲师名称" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.teacherName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="100" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.totalFee == 0
                ? "免费"
                : "￥" + scope.row.totalFee.toFixed(2)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.gmtCreate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : ''">
              {{ scope.row.status == 1 ? "已支付" : "未支付" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <router-link :to="`/course/${scope.row.courseId}`">
              <el-link type="primary" size="mini" icon="el-icon-edit"
                >去学习</el-link
              >
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>
<script>
import orderApi from "/api/order";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.initOrderList();
  },

  methods: {
    initOrderList() {
      // 加载订单列表
      orderApi.getOrders().then((res) => {
        this.list = res.data;
      });
    },
  },
};
</script>